import { SchedulerModal } from '@/components'
import { useAsync } from '@/hooks'
import { PlayBookService, SchedulerService } from '@/service'
import { Button, Popconfirm, Space } from 'antd'
import { useRef, useState } from 'react'
import QueryTablePagination from '~/components/QueryTablePagination'
import { useRowSelection } from '~/hooks'
import { getColumns, getOperationItemConfig } from './helper'
import styles from './index.module.less'
import SchedulerDetail from './partials/SchedulerDetail'

const Scheduler = () => {
  const [isRefresh, setIsRefresh] = useState(false)
  const { selectedRowKeys, selectedRows, onChange } = useRowSelection()
  const schedulerModalRef = useRef()
  const { data: playbookAllList } = useAsync(
    PlayBookService.queryPlayAllList,
    {},
    []
  )
  const onOpen = (type, record = {}) => {
    switch (type) {
      case 'add':
        schedulerModalRef.current.initModal()
        break
      case 'check':
        setSchedulerDetail({ visible: true, data: record })
      default:
        break
    }
  }
  const onDelete = () => {}

  const [schedulerDetail, setSchedulerDetail] = useState({
    visible: false,
    data: {}
  })
  return (
    <div className={styles['scheduler-container']}>
      <QueryTablePagination
        title="调度列表"
        isRefresh={isRefresh}
        setIsRefresh={setIsRefresh}
        canSearch={false}
        columns={getColumns()}
        service={SchedulerService.query}
        rowSelection={{ selectedRowKeys, onChange }}
        operation={{
          operationItemConfig: getOperationItemConfig(onOpen, onDelete),
          width: 250
        }}
      >
        <Space>
          <Button type="primary" onClick={() => onOpen('add')}>
            新建调度
          </Button>
          {/* <Button>导入</Button>
            <Button>导出</Button>
            <Button>授权</Button> */}
          <Popconfirm
            title="您确定要删除吗?"
            onConfirm={() => onDelete({ ids: selectedRowKeys })}
            okText="确定"
            cancelText="取消"
          >
            <Button disabled={selectedRowKeys.length === 0}>删除</Button>
          </Popconfirm>
        </Space>
      </QueryTablePagination>
      <SchedulerModal
        ref={schedulerModalRef}
        title="新建调度"
        playbookAllList={playbookAllList}
      />
      <SchedulerDetail {...schedulerDetail} setSchedulerDetail={setSchedulerDetail} />
    </div>
  )
}
export default Scheduler
